<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<!--导入elementUI样式-->
    <link rel="stylesheet" href="element-ui-2.13.0/lib/theme-chalk/index.css">
	<!--导入vue js文件-->
    <script src="js/vue-v2.6.10.js"></script>
	<!--导入elementUI js文件-->
    <script src="element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <!--v-model : 双向绑定，绑定vue中的数据 -->
        <!--actionName 指定默认选中的选项卡，在js中actionName="first",所以默认选中第一个选项卡 -->
        <el-tabs v-model="activeName">
            <el-tab-pane label="用户管理" name="first">
                用户管理<br/>
                用户管理<br/>
                用户管理<br/>
                用户管理<br/>
            </el-tab-pane>
            <el-tab-pane label="配置管理" name="second">
                配置管理<br/>
                配置管理<br/>
                配置管理<br/>
                配置管理<br/>
                配置管理<br/>
            </el-tab-pane>
            <el-tab-pane label="角色管理" name="third">
                角色管理<br/>
                角色管理<br/>
                角色管理<br/>
                角色管理<br/>
                角色管理<br/>
            </el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">
                定时任务补偿<br/>
                定时任务补偿<br/>
                定时任务补偿<br/>
                定时任务补偿<br/>
            </el-tab-pane>
        </el-tabs>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data:{
            activeName:"first",  //默认显示页
            dialogVisible:false   //默认隐藏弹出框
        },
        methods: {
        }
    });
</script>
</html>